<template>
<div class="c-nav">
    <div class="c-loginorname"><img src="../common/image/logo1.png" alt=""></div>
    <div class="c-nav-text">
      <!-- <img src="../common/image/homeimg.png" alt=""> -->
      <ul>

        <li v-for="(item,index) in navtext" :key="index"  @click="goforrot(index)">
          <div :class="navxz==index?'select':''">
            <img :src="navxz==index?item.imgurlxz:item.imgurlwxz" alt="">
            <span :class="navxz==index?'':'selectsp'" >{{item.text}}</span>
          </div>
        </li>
         <li >
          <div class="c-nav-cj-bt" @click="gocreate" v-if="getidentity==2 || getidentity==3">
            <img src="../common/image/icon_add.png" alt="">
            <span >新建项目</span>
          </div>
        </li>

        <!-- <li v-for="(item,index) in navtext" :key="index">
          <div :class="navxz==index?'select':''">
            <img :src="navxz==index?item.imgurlxz:item.imgurlwxz" alt="">
            <span :class="navxz==index?'':'selectsp'" >{{item.text}}</span>
          </div>
        </li> -->
      </ul>
    </div>
<!-- \common\image\homeimg.png -->
</div>
 <projectcreate ref="projectcreate"></projectcreate>

</template>

<script>
// @ is an alias to /src

import { ElConfigProvider } from 'element-plus'
import HelloWorld from '@/components/HelloWorld.vue'
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';
 import { ref,computed} from 'vue'
 import { useStore } from 'vuex'
 import zhcn from 'element-plus/lib/locale/lang/zh-cn'
 import { useRouter} from 'vue-router'
 import projectcreate from './projectcreate.vue'


export default {
  name: 'newview',
  setup(){
    const router=useRouter()
    const store = useStore()
    //  const aName = computed(() => store.state)
    console.log('ssdsasda',store.state.identity)
    const outlogin= function(){
    }
    const projectcreate=ref(null)
    const gocreate = ()=>{
        projectcreate.value.openprojectedit();
      }
      const dss='sdasda'
   

    return{
      projectcreate,
      gocreate,
      dss,
      
    }
  },
  data(){
    return{
      navtext:[{
        imgurlxz:require('../common/image/homeimg.png'),
        imgurlwxz:require('../common/image/nohomeimg.png'),
        text:'首页',
      },
      {
        imgurlxz:require('../common/image/project.png'),
        imgurlwxz:require('../common/image/noproject.png'),
        text:'项目',
      },
      {
        imgurlxz:require('../common/image/messgeimg.png'),
        imgurlwxz:require('../common/image/nomessgeimg.png'),
        text:'消息',
      }
      ],
      navxz:0,
      
      
    }
  },
  mounted(){
    console.log("this.$router.path",this.$router)
     


    if(this.$router.path=='/'){
      this.navxz=0
    }else if(this.$router.currentRoute.value.path=='/project'){
      this.navxz=1
    }else if(this.$router.path=='/news'){
      this.navxz=2
    }
    console.log(this.navxz)

    console.log('sdsa')
    let old=(new Date().getTime())+3600*24*1000
    console.log(old)

    let d=new Date()
     
    var now =new Date().getTime()
    var sysj=old-now
    console.log(Math.floor(sysj/(3600*1000)))
    var time = new Date(now);
    var y = time.getFullYear();//getFullYear方法以四位数字返回年份
    var moth = time.getMonth() + 1;// getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
    var datas = time.getDate();// getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
    var h = time.getHours();// getHours方法返回 Date 对象的小时 (0 ~ 23)
    var m = time.getMinutes();// getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
    var s = time.getSeconds();// getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
    console.log(moth)
    console.log(y+'-'+moth+'-'+datas+' '+h+':'+m+':'+s)
    
  },
  components: {
    HelloWorld,
    ElConfigProvider,
    projectcreate,
  },
  computed:{

    getidentity:function(){
      return this.$store.state.identity
    },
    getcount:function(){
      return this.$store.state.count
    },
    ...mapGetters(["js"]),
    vulz(){
      return this.val1+this.val2
    }
  },
  methods:{
    ckmm(){
      this.ck=!this.ck

    },
    goforrot(index){
      this.navxz=index
      switch (index) {
        case 0:
           this.$router.push({path:'/'})
          break;
        case 1:
           this.$router.push({path:'/project'})
          break;
        case 2:
           this.$router.push({path:'/news'})
          break;

        default:
          break;
      }
      

    },
    showtoast(){

      console.log(this)
      // console.log(this.$Vant)
//       this.$MintUI.Toast({
//   message: '提示',
//   position: 'bottom',
//   duration: 5000
    this.$toast('提示文案');

// });
    },
    zja(){
      this.a++
    },
    showPopup(){
      this.show=!this.show
    }
    
  },
  watch:{
     $route(to, from) {
      this.path = to.path;
      if(this.path=='/'){
      this.navxz=0
    }else if(this.path=='/project'){
      this.navxz=1
    }else if(this.path=='/news'){
      this.navxz=2
    }
      
    },
    '$store.state.count'(newVal,oldVal){
			//对数据执行操作
			console.log(newVal,oldVal)
		},

    a(newval,oldval){
      this.newa=newval
      this.olda=oldval
    }

  }
  
}
</script>
<style>
.c-nav{
  width: 256px;
  height: 1032px;
  min-height: 700px;
  background-color: #020113;
  border-radius: 48px;
  margin:24px  0 24px 32px;
}
.c-loginorname{
  margin: 0 auto;
  padding-top: 106px;
  width: 208px;
  height: auto;
}
.c-loginorname img{
  width: 100%;
  height: auto;
}
.c-nav-text ul{
  margin-top: 51px;
  
}
.c-nav-text ul li{
  width: 100%;
  height: 89px;
  
}
.c-nav-text ul li div{
  width: 100%;
  height: 89px;
  text-align: left;
  display: flex;
  justify-content: left;
  align-items: center;
  
}

.c-nav-text ul li div img{
  width: 56px;
  height: 56px;
  margin-left: 24px;
}

.c-nav-text ul li div span{
  /* width: 36px; */
height: 27px;
font-size: 18px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: #020113;
line-height: 28px;
}
.c-nav-text ul li div .selectsp{
  color: #FFFFFF;
}
.select{
background: url('../common/image/select.png') no-repeat top right;
background-size: 240px 89px;
}
.c-nav-text ul li .c-nav-cj-bt{
  justify-content: center;
  width: 201px;
  height: 48px;
  background: #FFFFFF;
  border-radius: 24px;
  margin: 0 auto;
  margin-top: 24px;
}
.c-nav-text ul li .c-nav-cj-bt img{
  width: 24px;
  height: 24px;
  margin: 0;
  margin-right: 8px;
}
.c-nav-text ul li .c-nav-cj-bt span{
  width: 72px;
  height: 28px;
  font-size: 18px;
  font-weight: 400;
  color: #020113;
  line-height: 28px;
  

}
 .c-pages-tb{
    position: absolute;
    bottom: 30px;
    width: auto;
    right: 30px;
 }
 .el-pager li{
  color: #A4A5AB;
}
.el-pager li.is-active{
  background: #F2F5FA;
  border-radius: 6px;
  border: none;
  color: #020113;
}
::deep(.el-pagination.is-background .el-pager li:link) {
    outline: none;
}
::deep(.el-pagination.is-background .el-pager li:hover) {
    outline: none;
}
::deep(.el-pagination.is-background .el-pager li:not(.disabled).visited) {
    outline: none;
}
::deep(.el-pagination.is-background .el-pager li:active) {
    outline: none;
}
::deep(.el-pagination.is-background .el-pager li:focus) {
    outline: none;
}

/* 表格 */
.el-input__inner{
  font-size: 18px;
  height: 100%;
}
.el-table{
  font-size: 18px;
}
.el-table .cell{
  line-height: 23px;
}
.el-select__popper .el-select-dropdown__wrap{
max-height: 274px;
}
.el-select-dropdown{
  min-width: 308px;
}

.el-date-picker{
  width: 322px;
}
.el-picker-panel__icon-btn{
  font-size: 12px;
  margin-top: 8px;
}
.el-date-picker__header-label{
  font-size: 16px;
  line-height: 30px;
  padding: 0 5px;
}
.el-date-picker .el-picker-panel__content{
      width: 292px;
}
.el-date-table{
  font-size: 12px;
}
.el-select-dropdown__item{
  font-size: 12px;
  padding: 0 32px 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
}
.el-date-table td{
      width: 32px;
    height: 30px;
    padding: 4px 0;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.el-date-table td .el-date-table-cell .el-date-table-cell__text{
      width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    line-height: 24px;
    position: absolute;

}
.el-date-table th{
      padding: 5px;
}
.el-icon{
  font-size: 20px;
}
/* .plus-icon-enter{
opacity: 0;
}
.plus-icon-leave{
opacity: 1;
} */
.plus-icon-leave-active,.plus-icon-enter-active{
transition: opacity .5s;
}
/* .plus-icon-leave-to{
opacity: 0;
}
.plus-icon-enter-to{
opacity: 1;
} */
.plus-icon-enter, .plus-icon-leave-to{
  opacity: 0;
}
.plus-icon-leave, .plus-icon-enter-to{
  opacity: 1;
}
/* .fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
} */
.fade-enter-active {
  animation: bounce-in .5s;
}
.fade-leave-active {
  animation: bounce-in .5s reverse;
}
.projects-identity{
  display: flex;

}
.project-picker-zi{
  width: 573px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid #C1C1C6;
  font-size: 18px;
  /* margin-left: 16px;  */
}


.details-tjsj .el-input__wrapper{
  border-radius: 8px;
  box-shadow:none;
}
.details-tjsj  .project-tjsj-picker{
  width: 100%;
  height: 60px;
  
}

.el-input__wrapper{
  border-radius: 8px;
}

.project-picker .el-input__inner{
  width: 500px;
  /* height: 48px; */
}
.project-picker .el-input__wrapper{
  /* margin-top: 5px; */
  box-shadow: none;
  border: 1px solid #C1C1C6;
}
.project-picker-zi .el-input__wrapper{
  margin-top: 5px;
  box-shadow: none;
}
.project-picker-zi .el-input__inner{
  width: 500px;
  /* height: 48px; */
}
.el-pagination{
  font-size: 18px;
}
.el-pager li{
  font-size:18px;
}
.el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon{
      font-size: 18px;
    font-weight: 700;
    line-height: 18px;
}
.el-pagination button, .el-pagination span:not([class*=suffix]){
  font-size: 18px;
}
.el-date-editor.el-input,  .el-date-editor.el-input__wrapper{
width: 100%;
height: 100%;
border-radius: 8px;
}
.project-picker .el-input__suffix-inner{
  position: absolute;
  /* height: 48px; */
  right: 10px;
  top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 文件上传 */
.uploadFilelist{
  position: absolute;
}
.el-upload-dragger{
 border: none;
}
.el-upload-listt{
  position: absolute;
}


</style>